<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=>, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 事件：
     事件监听:绑定事件
     1、html属性处理：需要在事件前+on,值就是事件处理程序（可以直接处理，也可用函数调用脚本）
     2、DOMO事件处理：对象的属性
     3、DOMO事件处理：调用方法addEventListener()和removeEventListener
     -->
    <button class="btn1" onclick="alert('感谢你的点击')">点我一下</button>
    <button class="btn2">登录</button>
    <button class="btn3">点击</button>
    <button class="btn4">随机点名</button>
    <h3 id = "font"></h3>
    <script>
        let show = function(){
            alert('感谢你的点击')
        };
        const button1 = document.querySelector('.btn2');
        button1.onclick = function(){
            alert('欢迎登录'+this.className);
        }
        const button2 = document.querySelector('.btn3');
        button2.addEventListener('click',function(){
            alert('hello world');
        },false);
        //随机点名
        let Name = ['a','b','c','d','e'];
        const clickName = document.querySelector('.btn4');
        clickName.addEventListener('click',function showName(){
            const h3Name = document.querySelector('#font');
            //let num = Math.floor(Math.random()*Name.length);
            let num = Math.floor(Math.random()*Name.length);
            h3Name.innerHTML = Name[num];
        },false);
          
        
        //获取随机名字并显示到网页中
        

    </script>
</body>
</html>